import type { ConfigProviderThemeVars } from 'wot-design-uni';

export type ColorVars = {
  primary?: string;
  success?: string; // 成功色
  warning?: string; // 警告色
  danger?: string; // 危险出错色
  secondary?: string; //辅色
  purple?: string; //紫色
  yellow?: string; // 黄色
  blue?: string; // 蓝色
  info?: string; // 信息色
};

export interface ThemeConfig extends ConfigProviderThemeVars, ColorVars {}

/**
 * 组件库主题配置 ------------------------------
 */
export const themeConfig: ThemeConfig = {
  primary: '#e27e85', // 主题色
  success: '#34d19d', // 成功色
  warning: '#f0883a', // 警告色
  danger: '#fa4350', // 危险出错色
  purple: '#8268de', // 紫色
  secondary: '#8268de',
  yellow: '#f0cd1d', // 黄色
  blue: '#2bb3ed', // 蓝色
  info: '#909399', // 信息色
  colorWhite: 'rgb(255, 255, 255)', // 用于mix的白色
  colorBlack: 'rgb(0, 0, 0)' // 用于mix的黑色
};

export const colorThemes = {
  light: {
    // 字体颜色
    textPrimary: '#333333', // 主要文字颜色（深灰色）
    textSecondary: '#666666', // 次要文字颜色（灰色）
    textDisabled: '#cccccc', // 禁用文字颜色（浅灰色）
    textLight: '#ffffff', // 白色字体
    textDark: '#000000', // 黑色字体

    // 分割线颜色
    line: '#E5E5E5', // 分割线颜色

    // 背景颜色
    bgPrimary: '#e2e8f0', // 页面背景 - 浅灰色，与导航栏白色有明显区分
    bgSecondary: '#cbd5e0', // 次级背景
    bgCard: '#ffffff', // 卡片背景（白色）
    bgHover: '#d1d5db', // 鼠标悬停时的背景色
    bgActive: '#9ca3af', // 按钮激活时的背景色
    bgDisabled: '#f3f4f6', // 禁用时背景色
    bgMask: 'rgba(0, 0, 0, 0.4)', // 遮罩颜色

    // 扩展颜色
    colorLight: '#f8f9fa',
    colorDark: '#1a1a1a',

    // 页面背景渐变 - 基于主题色
    pageBgGradient: 'linear-gradient(180deg, #fef7f0 2%, rgba(255, 255, 255, 0) 100%)',

    // 主题色变体 - 基于主色调
    primaryLight: '#f2a1a8', // 浅色变体
    primaryDark: '#d16570', // 深色变体

    // 成功色变体
    successLight: '#81D4AF', // 浅绿色
    successDark: '#2BA76A', // 深绿色

    // 警告色变体
    warningLight: '#F5B665', // 浅橙色
    warningDark: '#E89A3C', // 深橙色

    // 危险色变体
    dangerLight: '#FA7B81', // 浅红色
    dangerDark: '#F73C47', // 深红色

    // 宫格渐变背景色
    gradientPurple: 'linear-gradient(135deg, var(--bsin-primaryLight), var(--bsin-primaryDark))',
    gradientPink: 'linear-gradient(135deg, var(--bsin-dangerLight), var(--bsin-dangerDark))',
    gradientBlue: 'linear-gradient(135deg, var(--bsin-color-blue), var(--bsin-primaryDark))',
    gradientGreen: 'linear-gradient(135deg, var(--bsin-successLight), var(--bsin-successDark))',
    gradientOrange: 'linear-gradient(135deg, var(--bsin-warningLight), var(--bsin-warningDark))',
    gradientCyan: 'linear-gradient(135deg, var(--bsin-color-secondary), var(--bsin-primaryLight))',
    gradientPeach: 'linear-gradient(135deg, var(--bsin-warningLight), var(--bsin-dangerLight))',
    gradientTeal: 'linear-gradient(135deg, var(--bsin-successLight), var(--bsin-color-secondary))',
    gradientIndigo: 'linear-gradient(135deg, var(--bsin-color-purple), var(--bsin-primaryDark))'
  },
  dark: {
    // 字体颜色
    textPrimary: '#f7fafc', // 主要文字颜色（浅色）
    textSecondary: '#cbd5e0', // 次要文字颜色（浅灰色）
    textDisabled: '#718096', // 禁用文字颜色（中灰色）
    textLight: '#000000', // 黑色字体
    textDark: '#ffffff', // 白色字体

    // 分割线颜色
    line: '#404040', // 分割线颜色（深色主题下调整）

    // 背景颜色
    bgPrimary: '#374151', // 页面背景 - 深灰色，与导航栏黑色有明显区分
    bgSecondary: '#1f2937', // 次级背景
    bgCard: '#4b5563', // 卡片背景（深灰色）
    bgHover: '#6b7280', // 鼠标悬停时的背景色
    bgActive: '#9ca3af', // 按钮激活时的背景色
    bgDisabled: '#374151', // 禁用时背景色
    bgMask: 'rgba(0, 0, 0, 0.6)', // 遮罩颜色（深色主题下调整）

    // 扩展颜色
    colorLight: '#2d3748',
    colorDark: '#f7fafc',

    // 页面背景渐变（深色主题）- 基于主题色
    pageBgGradient: 'linear-gradient(180deg, #2d1b1f 2%, rgba(45, 27, 31, 0) 100%)',

    // 主题色变体（深色主题下调整亮度）
    primaryLight: '#f7b2b8', // 深色主题下的浅色变体
    primaryDark: '#c94d5a', // 深色主题下的深色变体

    // 成功色变体
    successLight: '#A5D6A7', // 深色主题下的浅绿
    successDark: '#2E7D32', // 深色主题下的深绿

    // 警告色变体
    warningLight: '#FFB74D', // 深色主题下的浅橙
    warningDark: '#E65100', // 深色主题下的深橙

    // 危险色变体
    dangerLight: '#FF8A80', // 深色主题下的浅红
    dangerDark: '#D32F2F', // 深色主题下的深红

    // 宫格渐变背景色（深色主题）
    gradientPurple: 'linear-gradient(135deg, var(--bsin-primaryLight), var(--bsin-primaryDark))',
    gradientPink: 'linear-gradient(135deg, var(--bsin-dangerLight), var(--bsin-dangerDark))',
    gradientBlue: 'linear-gradient(135deg, var(--bsin-color-blue), var(--bsin-primaryDark))',
    gradientGreen: 'linear-gradient(135deg, var(--bsin-successLight), var(--bsin-successDark))',
    gradientOrange: 'linear-gradient(135deg, var(--bsin-warningLight), var(--bsin-warningDark))',
    gradientCyan: 'linear-gradient(135deg, var(--bsin-color-secondary), var(--bsin-primaryLight))',
    gradientPeach: 'linear-gradient(135deg, var(--bsin-warningLight), var(--bsin-dangerLight))',
    gradientTeal: 'linear-gradient(135deg, var(--bsin-successLight), var(--bsin-color-secondary))',
    gradientIndigo: 'linear-gradient(135deg, var(--bsin-color-purple), var(--bsin-primaryDark))'
  }
};

export const getVariables = () => {
  const scssThems = Object.keys(colorThemes.light).reduce((acc, key) => {
    acc[`$u-${key}`] = `var(--bsin-${key})`;
    return acc;
  }, {});
  return scssThems;
};

/**
 * 根据 darker lighter 生成light和dark的颜色 css变量与颜色
 */
const lightDarkTheme = () => {
  const thems = Object.keys(colorThemes.light).reduce((acc, key) => {
    acc[key] = `var(--bsin-${key})`;
    return acc;
  }, {});
  return thems;
};

/**
 * unocss 使用的颜色
 */
export const unoTheme = {
  ...lightDarkTheme(),
  primary: 'var(--bsin-color-primary)',
  success: 'var(--bsin-color-success)',
  secondary: 'var(--bsin-color-secondary)',
  warning: 'var(--bsin-color-warning)',
  danger: 'var(--bsin-color-danger)',
  purple: 'var(--bsin-color-purple)',
  yellow: 'var(--bsin-color-yellow)',
  blue: 'var(--bsin-color-blue)',
  info: 'var(--bsin-color-info)'
};

/**
 * 生成css变量
 */

export const initCssVars = (theme: 'light' | 'dark', themeVars: ThemeConfig) => {
  //后续确定了ui规范可以直接定义mixVars 的颜色值
  const mixVars = {};
  //生成了对应的颜色
  Object.keys(colorThemes[theme]).forEach(key => {
    mixVars[`--bsin-${key}`] = colorThemes[theme][key] || colorThemes['light'][key];
  });

  const { primary, success, warning, danger, purple, yellow, blue, info, secondary } = themeVars;

  return {
    ...mixVars,
    '--wot-color-white': 'rgb(255, 255, 255)',
    '--wot-color-black': 'rgb(0, 0, 0)',
    '--wot-color-success': success,
    '--wot-color-warning': warning,
    '--wot-color-danger': danger,
    '--wot-color-purple': purple,
    '--wot-color-yellow': yellow,
    '--wot-color-blue': blue,
    '--wot-color-info': info,
    '--wot-color-theme': primary,
    '--bsin-color-primary': primary,
    '--bsin-color-secondary': secondary,
    '--bsin-color-white': 'rgb(255, 255, 255)',
    '--bsin-color-black': 'rgb(0, 0, 0)',
    '--bsin-color-success': success,
    '--bsin-color-warning': warning,
    '--bsin-color-danger': danger,
    '--bsin-color-purple': purple,
    '--bsin-color-yellow': yellow,
    '--bsin-color-blue': blue,
    '--bsin-color-info': info
  };
};

/**
 * 组件库颜色映射
 */

export const themeConfigMapping = (themeConfig: ThemeConfig): ConfigProviderThemeVars => {
  const {
    primary: colorTheme,
    success: colorSuccess,
    warning: colorWarning, // 警告色
    danger: colorDanger, // 危险出错色
    purple: colorPurple, //紫色
    yellow: colorYellow, // 黄色
    blue: colorBlue, // 蓝色
    info: colorInfo, // 信息色
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    secondary,
    ...otherConfig
  } = themeConfig;

  return {
    ...otherConfig,
    colorTheme,
    colorSuccess,
    colorWarning,
    colorDanger,
    colorPurple,
    colorYellow,
    colorBlue,
    colorInfo
  };
};
